<template>
  <div id="app">
    <main>
      <section v-if="this.timer==true">
        <div class="video" v-if="this.listData.length!=0">
          <div v-for="item in listData" :key='item.unid' v-if='item.equipmentName == vname'>
            <my-video :sources="[{src: item.fullPathHLS,type:'video/mp4'}]" :options="video.options"></my-video>
          </div>
          <p class="video-infos"><label>请选择以下信号源</label></p>
          <ul>
            <li v-for="item in listData" :key='item.unid'>
              <div class="videoname" @click="videoitem(item.equipmentName)" :class='{videonameactive:item.equipmentName==showactive}'>{{item.equipmentName}}</div>
            </li>
          </ul>
  
        </div>
        <div class="video" v-else>
          <div class="none_data">
            <img src="../assets/img/tip.png" alt="">
          </div>
        </div>
      </section>
      <section > 
           <div class="none_data">
            <img src="../assets/img/tip.png" alt="">
            <p>不是开放时间，请稍后查看</p>
          </div>
      </section>
    </main>
  </div>
</template>

<script type="text/ecmascript-6">
  import {
    Videolist,
    DevelopmentTime
  } from '../api/api'
  
  import myVideo from 'vue-video'
  import {
    Toast
  } from 'mint-ui';
  export default {
    components: {
      myVideo,
    },
    data() {
      return {
        listData: [],
        timer:{},
        vediosrc: '',
        showactive: '',
        video: {
          options: {
            volume: 0.6,
            poster: '../../static/img/vedio.png'
          }
        },
        vname: '',
      };
    },
    props: ["enterpriseUnid"],
    methods: {
      /* 判断是否开放时间，为真则允许查看视频，反之不允许 */
      Time() {
        DevelopmentTime().then((res) => {
          if (res.success === true) {
            this.timer = res.data;
          }
        })
      },
      videoitem(vname) {
        let instance = Toast({
          message: '成功切换信号源',
          iconClass: 'el-icon-check'
        });
        setTimeout(() => {
          instance.close();
        }, 800)
        this.vname = vname;
        this.showactive = vname;
      },
      getData() {
        let options = {
          params: {
            enterpriseUnid: this.enterpriseUnid
          }
        }
        //调取接口
        Videolist(options).then((res) => {
          if (res.success === true) {
            this.listData = res.data;
            this.vediosrc = this.listData[0].pathHLS;
            this.vname = this.listData[0].equipmentName;
            this.showactive = this.vname;
          }
        })
      }
    },
    //页面加载时候
    created() {
      this.Time();
      this.getData();
    }
  
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .video {
    width: 100%;
    margin: 0px auto;
    ul {
      width: 100%;
      overflow: hidden;
      li {
        float: left;
        overflow: hidden;
        .videoname {
          background: rgba(97, 141, 204, 0.53);
          box-shadow: 0px 3px 12px #ccc;
          font-size: 0.8rem;
          color: #fff;
          margin: .5rem;
          padding: 8px;
          border-radius: 20px;
          text-align: center
        }
      }
    }
  }
  
  .videonameactive {
    background: #618dcc !important
  }
  
  .video-infos {
    background: #efefef;
    padding: 10px 0px;
    margin: 0px;
    i {
      padding: 0 .5rem 0 .8rem;
      vertical-align: inherit;
      color: #FF9800;
    }
    label {
      font-size: .8rem;
      color: #333;
    }
  }
  
  .container {
    width: 100%;
    background: #000
  }
</style>
